<template>
  <view class="complaint-feedback-submit">
    <bg-set background="#f2f3f7" />
    <view class="complaint-feedback-submit__main">
      <view class="description-part">
        <view class="description-message"><text>问题描述</text></view>
        <view class="description-input">
          <van-field
            v-model="message"
            rows="3"
            autosize
            type="textarea"
            placeholder="请填写10个字以上的问题描述以便我们提供更好的服务"
            maxlength="200"
            show-word-limit
          />
        </view>
      </view>
      <view class="complaint-images-part">
        <view class="header f jc-sb"
          ><text>证据截图</text><text>{{ fileList.length }}/4</text></view
        >
        <view class="body">
          <van-uploader v-model="fileList" multiple :max-count="4" />
        </view>
      </view>
      <view class="footer-part f fd-col ai-c">
        <view class="message"
          ><text>匿名提交，我们不会收集你的用户信息，请放心提交</text></view
        >
        <view class="button f jc-c f1">
          <van-button
            type="primary"
            style="width: 90%"
            round
            @click="submitComplaintFeedback"
            >提交</van-button
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import profileAPI from "/api/modules/profile";
import { getValueFromUrl } from "/utils/index";
export default {
  name: "complaint-feedback-submit",
  data() {
    return {
      message: "",
      complaintType: "",
      fileList: [],
      leftTextObj: {
        type1: "交易退款、发货、售后问题",
        type2: "虚假红包、恶意下载",
      },
    };
  },
  created() {
    // 获取complaintType
    const href = window.location.href;
    this.complaintType = getValueFromUrl(href, "complaintType");
  },
  methods: {
    submitComplaintFeedback() {
      if (this.message === "") {
        uni.showToast({
          title: "问题描述未传递",
          icon: "error",
          duration: 2000,
          position: "top",
        });
        return;
      }
      const params = {
        complaintType: this.leftTextObj[this.complaintType],
        desc: this.message,
        contents: JSON.stringify(this.fileList.map((item) => item.content)),
      };
      profileAPI
        .insertComplaintFeedback(params)
        .then((res) => {
          uni.showToast({
            title: "提交成功",
            icon: "success",
            duration: 2000,
            position: "top",
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang='scss' scoped>
.complaint-feedback-submit {
  position: relative;
  width: 100%;
  height: 100vh;
  &__main {
    width: 100%;
    .description-part {
      background-color: #fff;
      .description-message {
        padding: 20rpx;
        box-sizing: border-box;
      }
      .description-input {
        ::v-deep .van-field {
          padding-left: 20rpx;
          .van-field__control {
            font-size: 36rpx;
          }
        }
      }
    }
    .complaint-images-part {
      margin-top: 40rpx;
      padding: 20rpx;
      background-color: #fff;
      box-sizing: border-box;
      .body {
        margin-top: 20rpx;
      }
    }
    .footer-part {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 180rpx;
      .message {
        font-size: 20rpx;
        color: #999;
      }
      .button {
        margin-top: 20rpx;
        padding-top: 20rpx;
        width: 100%;
        background-color: #fff;
      }
    }
  }
}
</style>